<template>
    <div>
    </div>
</template>

<script setup lang="ts">
import { useVueCesium } from 'vue-cesium'
import type { VcViewerProvider, VcReadyObject, CesiumCartesian2, CesiumCartesian3Array } from 'vue-cesium/es/utils/types'
import { gcj02towgs84 } from '../../utils/index'

const $vc: VcViewerProvider = useVueCesium()

$vc.creatingPromise.then((readyObj: VcReadyObject) => {

    console.log(readyObj.viewer) // instanceof Cesium.Viewer
    let Cesium = readyObj.Cesium
    let viewer = readyObj.viewer

    // 高德坐标处理成笛卡尔3坐标
    // 自己在高德地图坐标拾取器中扣的数据，是个意思，项目中使用最好下载河流数据
    let positions = [[117.950543, 31.657815], [117.950704, 31.657879], [117.950543, 31.657815],
    [117.951573, 31.657801], [117.952088, 31.657902], [117.953478, 31.658536], [117.953843, 31.658646],
    [117.95417, 31.658495], [117.954331, 31.658152], [117.954315, 31.657938], [117.954116, 31.657244],
    [117.954111, 31.656554], [117.954111, 31.656554], [117.954111, 31.656554], [117.954111, 31.656554],
    [117.953054, 31.655198], [117.950855, 31.653344], [117.95085, 31.653334], [117.949622, 31.653192],
    [117.949482, 31.653242], [117.949407, 31.65463], [117.949653, 31.655924], [117.949953, 31.656367],
    [117.950409, 31.657381], [117.950474, 31.657691]
    ]

    const wgs84ToCartesian3 = (posArr, height?) => {
        let newPosArr = []
        let wgs84Item = []
        let Cartesian3Item: any = []
        posArr.map(item => {
            wgs84Item = gcj02towgs84(item[0], item[1])
            Cartesian3Item = Cesium.Cartesian3.fromDegrees(wgs84Item[0], wgs84Item[1], height);
            newPosArr.push(Cartesian3Item)
        })
        return newPosArr
    }

    let newPositions = wgs84ToCartesian3(positions, 1000)
    console.log(newPositions);

    //newPositions 为polygon的坐标数组
    let waterPrimitive = new Cesium.Primitive({
        allowPicking: false,
        geometryInstances: new Cesium.GeometryInstance({
            geometry: new Cesium.PolygonGeometry({
                polygonHierarchy: new Cesium.PolygonHierarchy(newPositions),
                vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
            })
        }),
        // 使用内置的水面shader
        appearance: new Cesium.EllipsoidSurfaceAppearance({
            aboveGround: true,
            material: new Cesium.Material({
                fabric: {
                    type: 'Water',
                    uniforms: {
                        baseWaterColor: new Cesium.Color(64 / 255.0, 157 / 255.0, 253 / 255.0, 0.5), //水的基本颜色
                        blendColor: new Cesium.Color(0.0, 0.0, 1.0, 0.3), //水与非水区域的混合颜色
                        normalMap: new URL('./water.jpg', import.meta.url).href, //水的法线贴图
                        frequency: 200.0, //水波纹的数量
                        animationSpeed: 0.01, //水的流速
                        amplitude: 10, //水波纹振幅
                        specularIntensity: 10, //镜面反射强度
                    }
                }
            })
        })
    });
    //添加水面数据到viewer中
    viewer.scene.primitives.add(waterPrimitive);
    viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(117.950543, 31.657815, 3000.0),
    })
})

</script>